import React, { Component } from 'react'
import {
    View,
    Text,
    Image,
    TouchableOpacity,
    StyleSheet
} from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome';
import { StackActions, NavigationActions } from 'react-navigation'
import WXStyle from '../../utils/style/wxstyle';
import Style from '../../utils/style/style';
import ConfirmModal from '../../components/modal/confirmModal';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import o from '../../components/o'
 class User extends Component {
    constructor(props) {
        super(props);
        this.state = {
            AdminName: null,
            modal: {
                title: '',
                msg: '',
                visible: false
            }
        }
    }

    componentDidMount() {
        this.initData()
    }

    initData() {
        const { token, tenantId } = this.props
        let params = {
            filter: 'tenant_id eq ' + tenantId,
            api: `erp_tenant?token=${token}`
        }
        o(params.api).filter(params.filter).get().then((oHandler) => {
            const data = oHandler.data
            this.setState({
                AdminName: data[0].Name
            })
        }).catch(e => {
        })
    }

    static navigationOptions = {
        title: '我的',
        headerBackground: '#1aad19'
    };
    _confirmOut() {
        this.setState({
            modal: {
                title: '提示',
                msg: '确定要退出吗',
                visible: true
            }
        })
    }
    _signOut() {
        //清除所有缓存
        global.storage.remove({ key: 'openid' })
        const resetAction = StackActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName: 'Login' })],
        });
        this.props.navigation.dispatch(resetAction);
    }
    _renderConfirmModal() {
        return (
            <ConfirmModal
                title={this.state.modal.title}
                msg={this.state.modal.msg}
                visible={this.state.modal.visible}
                Cancel={() => this._hideModal()}
                Confirm={() => this._signOut()}
            />
        )
    }
    _hideModal() {
        this.setState({
            modal: {
                title: '',
                msg: '',
                visible: false
            }
        })
    }

    render() {
        const { user, roleList } = this.props;
        const avatar = user && user.user_file ? user.user_file.Url : '';
        const {AdminName} = this.state
        return (
            user ?
                <View style={styles.container}>
                    <View style={styles.header}>
                        <View style={styles.imageWrap}><Image style={styles.image} source={{ uri: avatar }} resizeMode="cover" /></View>
                        <View style={styles.baseinfo}>
                            <Text style={styles.baseInfoText}>{user.Nickname}</Text>
                            <Text style={styles.baseInfoText}>{user.Mobile}</Text>
                        </View>
                    </View>
                    <View style={styles.cell}>
                        <Icon name="bank" size={14} color="#999" />
                        <Text style={styles.cellText}>隶属主体</Text>
                    </View>
                    <View style={styles.cellInput}>
                        <Text style={[Style.f17, Style.colorBlack]}>{AdminName}</Text>
                    </View>
                    <View style={styles.cell}>
                        <Icon name="user-circle-o" size={14} color="#999" />
                        <Text style={styles.cellText}>角色</Text>
                    </View>
                    <View style={styles.cellInput}>
                        {
                            roleList.map((item, index) =>
                                (<View style={styles.roleItem}>
                                    <Text style={[Style.f13, Style.colorGreen]}>{item.RoleName}</Text>
                                </View>))
                        }
                    </View>
                    <View style={styles.gap}></View>
                    <TouchableOpacity style={styles.cellInput} onPress={() => this._confirmOut()}>
                        <Icon name="sign-out" size={17} color="red" />
                        <Text style={[Style.f17, Style.colorBlack, Style.ml10]}>退出</Text>
                    </TouchableOpacity>
                    {this._renderConfirmModal()}
                </View> : null
        );
    }
}

const styles = StyleSheet.create({
    container: {
        width: Style.width,
        height: Style.ViewHeight,
        backgroundColor: '#fff'
    },
    header: {
        padding: 20,
        height: 110,
        width: Style.width,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#1aad19'
    },
    imageWrap: {
        borderStyle: 'solid',
        borderColor: '#fff',
        borderWidth: 2,
        borderRadius: 30
    },
    image: {
        height: 60,
        width: 60,
        borderRadius: 30
    },
    baseinfo: {
        justifyContent: 'space-around',
        height: 70,
        marginLeft: 10
    },
    baseInfoText: {
        color: '#fff',
        fontSize: 16,
    },
    cell: {
        borderStyle: 'solid',
        borderColor: '#e5e5e5',
        borderBottomWidth: 1,
        paddingLeft: 15,
        height: 32,
        marginTop: 5,
        flexDirection: 'row',
        alignItems: 'center'
    },
    cellInput: {
        borderStyle: 'solid',
        borderColor: '#e5e5e5',
        borderBottomWidth: 1,
        paddingLeft: 15,
        paddingRight: 15,
        height: 45,
        flexDirection: 'row',
        alignItems: 'center'
    },
    cellText: {
        fontSize: 14,
        color: '#999',
        marginLeft: 10
    },

    roleItem: {
        paddingTop: 3,
        paddingBottom: 3,
        paddingLeft: 10,
        paddingRight: 10,
        marginLeft: 3,
        marginRight: 3,
        borderColor: WXStyle.mainColor,
        borderStyle: 'solid',
        borderWidth: 1,
        borderRadius: 15,
    },
    gap: {
        width: Style.width,
        height: 20,
        borderColor: '#e5e5e5',
        borderStyle: 'solid',
        borderBottomWidth: 1,
    },
})

export default connect(
    state => ({
        user: state.User.userInfo,
        token: state.User.token,
        tenantId: state.User.tenantId,
        roleList:state.User.roleList,
        openid: state.User.openid,
    }),
)(User)